<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <q-card class="no-shadow" bordered>
        <q-card-section>
          <div class="text-h6 text-indigo-8">树形表格</div>
          <div class="text-subtitle2">简单例子</div>
        </q-card-section>

        <q-separator></q-separator>
        <q-card-section class="q-pa-none">
          <simple-hierarchy></simple-hierarchy>
        </q-card-section>
      </q-card>

      <q-card class="q-mt-sm no-shadow" bordered>
        <q-card-section>
          <div class="text-h6 text-indigo-8">自定义内容</div>
          <div class="text-subtitle2">例子</div>
        </q-card-section>
        <q-separator></q-separator>

        <q-card-section class="q-pa-none">
          <custom-hierarchy></custom-hierarchy>
        </q-card-section>
      </q-card>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const SimpleHierarchy = defineAsyncComponent(
  () => import('components/tree-table/SimpleHierarchy.vue')
);
const CustomHierarchy = defineAsyncComponent(
  () => import('components/tree-table/CustomHierarchy.vue')
);
</script>

<style scoped></style>
